<script setup lang="ts">
import {
  NotificationIcon,
  MessageIcon,
  DashBoardIcon,
  SettingsIcon,
  ProfileIcon
} from '@/components/Icons'

interface Props {
  active: boolean
}
defineProps<Props>()

const iconSize = {
  width: 20,
  height: 20
}
</script>

<template>
  <div :class="['menu', { active: active }]">
    <ul>
      <li><DashBoardIcon class="icon" v-bind="iconSize" /> Dashboard</li>
      <li><ProfileIcon class="icon" v-bind="iconSize" /> Profile</li>
      <li><NotificationIcon class="icon" v-bind="iconSize" /> Notifications</li>
      <li><MessageIcon class="icon" v-bind="iconSize" /> Messages</li>
      <li><SettingsIcon class="icon" :width="25" :height="25" /> Settings</li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.menu {
  position: absolute;
  top: 50px;
  left: 65px;
  border-radius: 2px;
  background-color: #43627d;
  opacity: 1;
  transition: all 0.5s linear;
  transform: translateX(20px);

  &.active {
    transform: translateX(-13px);
  }

  ul {
    margin: 0;
    padding: 10px 0;

    li {
      color: #93b2cd;
      padding: 18px;
      list-style: none;
      display: flex;
      align-items: center;
      &:hover {
        color: #fff;

        .icon {
          fill: #fff;
        }
      }

      .icon {
        margin-right: 5px;
        fill: #b2daff;
        cursor: pointer;
      }
    }
  }
}
</style>
